﻿@page "/components/link"
<LayoutContent AnchorItems="@(new[]{"文字链接","下划线文字链接","带图标的链接","链接悬浮态样式的链接","禁用的链接","不同尺寸的链接","API"})">
<PageHeader Title="Link 链接">
    文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。
</PageHeader>

<Example Title="文字链接">
    <Description>最简单的文字链接形式，点击后直接跳转到对应链接。</Description>
    <RunContent>
        <TLink>跳转链接</TLink>
        <TLink Theme="Theme.Primary">跳转链接</TLink>
        <TLink Theme="Theme.Warning">跳转链接</TLink>
        <TLink Theme="Theme.Success">跳转链接</TLink>
        <TLink Theme="Theme.Danger">跳转链接</TLink>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLink>跳转链接</TLink>
<TLink Theme=""Theme.Primary"">跳转链接</TLink>
<TLink Theme=""Theme.Warning"">跳转链接</TLink>
<TLink Theme=""Theme.Success"">跳转链接</TLink>
<TLink Theme=""Theme.Danger"">跳转链接</TLink>
```
")
    </CodeContent>
</Example>
<Example Title="下划线文字链接">
    <Description>在文字下加横线，表明此处为链接。</Description>
    <RunContent>
        <TLink Underline>跳转链接</TLink>
        <TLink Theme="Theme.Primary" Underline>跳转链接</TLink>
        <TLink Theme="Theme.Warning" Underline>跳转链接</TLink>
        <TLink Theme="Theme.Success" Underline>跳转链接</TLink>
        <TLink Theme="Theme.Danger" Underline>跳转链接</TLink>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLink Underline>跳转链接</TLink>
<TLink Theme=""Theme.Primary"" Underline>跳转链接</TLink>
<TLink Theme=""Theme.Warning"" Underline>跳转链接</TLink>
<TLink Theme=""Theme.Success"" Underline>跳转链接</TLink>
<TLink Theme=""Theme.Danger"" Underline>跳转链接</TLink>
```
")
    </CodeContent>
</Example>
<Example Title="带图标的链接">
    <Description>最简单的文字链接形式，点击后直接跳转到对应链接。</Description>
    <RunContent>
        <TLink><TIcon Name="IconName.Edit"/> 跳转链接</TLink>
        <TLink Theme="Theme.Primary"><TIcon Name="IconName.Edit" /> 跳转链接</TLink>
        <TLink Theme="Theme.Warning"><TIcon Name="IconName.Edit"/> 跳转链接</TLink>
        <TLink Theme="Theme.Success">跳转链接 <TIcon Name="IconName.Home" /></TLink>
        <TLink Theme="Theme.Danger">跳转链接 <TIcon Name="IconName.Gift" /></TLink>
        <br />

        <TLink Underline><TIcon Name="IconName.Edit" /> 跳转链接</TLink>
        <TLink Underline Theme="Theme.Primary"><TIcon Name="IconName.Edit" /> 跳转链接</TLink>
        <TLink Underline Theme="Theme.Warning"><TIcon Name="IconName.Edit" /> 跳转链接</TLink>
        <TLink Underline Theme="Theme.Success">跳转链接 <TIcon Name="IconName.Home" /></TLink>
        <TLink Underline Theme="Theme.Danger">跳转链接 <TIcon Name="IconName.Gift" /></TLink>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLink><TIcon Name=""IconName.Edit""/> 跳转链接</TLink>
<TLink Theme=""Theme.Primary""><TIcon Name=""IconName.Edit""/> 跳转链接</TLink>
<TLink Theme=""Theme.Warning""><TIcon Name=""IconName.Edit""/> 跳转链接</TLink>
<TLink Theme=""Theme.Success"">跳转链接 <TIcon Name=""IconName.Home"" /></TLink>
<TLink Theme=""Theme.Danger"">跳转链接 <TIcon Name=""IconName.Gift"" /></TLink>

<br />

<TLink Underline><TIcon Name=""IconName.Edit""/> 跳转链接</TLink>
<TLink Underline Theme=""Theme.Primary""><TIcon Name=""IconName.Edit""/> 跳转链接</TLink>
<TLink Underline Theme=""Theme.Warning""><TIcon Name=""IconName.Edit""/> 跳转链接</TLink>
<TLink Underline Theme=""Theme.Success"">跳转链接 <TIcon Name=""IconName.Home"" /></TLink>
<TLink Underline Theme=""Theme.Danger"">跳转链接 <TIcon Name=""IconName.Gift"" /></TLink>
```
")
    </CodeContent>
</Example>
<Example Title="链接悬浮态样式的链接">
    <Description>悬浮状态包含 2 种状态：文本颜色变化 和 添加下划线。</Description>
    <RunContent>
        <TLink Hover="LinkHover.Underline">跳转链接</TLink>
        <TLink Hover="LinkHover.Underline" Theme="Theme.Primary">跳转链接</TLink>
        <TLink Hover="LinkHover.Underline" Theme="Theme.Warning">跳转链接</TLink>
        <TLink Hover="LinkHover.Underline" Theme="Theme.Success">跳转链接</TLink>
        <TLink Hover="LinkHover.Underline" Theme="Theme.Danger">跳转链接</TLink>
        <br />
        <TLink Hover="LinkHover.Color">跳转链接</TLink>
        <TLink Hover="LinkHover.Color" Theme="Theme.Primary">跳转链接</TLink>
        <TLink Hover="LinkHover.Color" Theme="Theme.Warning">跳转链接</TLink>
        <TLink Hover="LinkHover.Color" Theme="Theme.Success">跳转链接</TLink>
        <TLink Hover="LinkHover.Color" Theme="Theme.Danger">跳转链接</TLink>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLink Hover=""LinkHover.Underline"">跳转链接</TLink>
<TLink Hover=""LinkHover.Underline"" Theme=""Theme.Primary"">跳转链接</TLink>
<TLink Hover=""LinkHover.Underline"" Theme=""Theme.Warning"">跳转链接</TLink>
<TLink Hover=""LinkHover.Underline"" Theme=""Theme.Success"">跳转链接</TLink>
<TLink Hover=""LinkHover.Underline"" Theme=""Theme.Danger"">跳转链接</TLink>

<br />

<TLink Hover=""LinkHover.Color"">跳转链接</TLink>
<TLink Hover=""LinkHover.Color"" Theme=""Theme.Primary"">跳转链接</TLink>
<TLink Hover=""LinkHover.Color"" Theme=""Theme.Warning"">跳转链接</TLink>
<TLink Hover=""LinkHover.Color"" Theme=""Theme.Success"">跳转链接</TLink>
<TLink Hover=""LinkHover.Color"" Theme=""Theme.Danger"">跳转链接</TLink>
```
")
    </CodeContent>
</Example>
<Example Title="禁用的链接">
    <Description>当链接不可用时，显示禁用状态。</Description>
    <RunContent>
        <TLink Disabled>跳转链接</TLink>
        <TLink Disabled Theme="Theme.Primary">跳转链接</TLink>
        <TLink Disabled Theme="Theme.Warning">跳转链接</TLink>
        <TLink Disabled Theme="Theme.Success">跳转链接</TLink>
        <TLink Disabled Theme="Theme.Danger">跳转链接</TLink>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLink Disabled>跳转链接</TLink>
<TLink Disabled Theme=""Theme.Primary"">跳转链接</TLink>
<TLink Disabled Theme=""Theme.Warning"">跳转链接</TLink>
<TLink Disabled Theme=""Theme.Success"">跳转链接</TLink>
<TLink Disabled Theme=""Theme.Danger"">跳转链接</TLink>
```
")
    </CodeContent>
</Example>
<Example Title="不同尺寸的链接">
    <Description>提供大、中（默认）、小三种尺寸。</Description>
    <RunContent>
        <TLink Size="Size.Small">跳转链接</TLink>
        <TLink Size="Size.Small" Theme="Theme.Primary">跳转链接</TLink>
        <TLink Size="Size.Small" Theme="Theme.Warning">跳转链接</TLink>
        <TLink Size="Size.Small" Theme="Theme.Success">跳转链接</TLink>
        <TLink Size="Size.Small" Theme="Theme.Danger">跳转链接</TLink>
        <br />
        <TLink Size="Size.Medium">跳转链接</TLink>
        <TLink Size="Size.Medium" Theme="Theme.Primary">跳转链接</TLink>
        <TLink Size="Size.Medium" Theme="Theme.Warning">跳转链接</TLink>
        <TLink Size="Size.Medium" Theme="Theme.Success">跳转链接</TLink>
        <TLink Size="Size.Medium" Theme="Theme.Danger">跳转链接</TLink>
        <br />
        <TLink Size="Size.Large">跳转链接</TLink>
        <TLink Size="Size.Large" Theme="Theme.Primary">跳转链接</TLink>
        <TLink Size="Size.Large" Theme="Theme.Warning">跳转链接</TLink>
        <TLink Size="Size.Large" Theme="Theme.Success">跳转链接</TLink>
        <TLink Size="Size.Large" Theme="Theme.Danger">跳转链接</TLink>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLink Size=""Size.Small"">跳转链接</TLink>
<TLink Size=""Size.Small"" Theme=""Theme.Primary"">跳转链接</TLink>
<TLink Size=""Size.Small"" Theme=""Theme.Warning"">跳转链接</TLink>
<TLink Size=""Size.Small"" Theme=""Theme.Success"">跳转链接</TLink>
<TLink Size=""Size.Small"" Theme=""Theme.Danger"">跳转链接</TLink>
<br />
<TLink Size=""Size.Medium"">跳转链接</TLink>
<TLink Size=""Size.Medium"" Theme=""Theme.Primary"">跳转链接</TLink>
<TLink Size=""Size.Medium"" Theme=""Theme.Warning"">跳转链接</TLink>
<TLink Size=""Size.Medium"" Theme=""Theme.Success"">跳转链接</TLink>
<TLink Size=""Size.Medium"" Theme=""Theme.Danger"">跳转链接</TLink>
<br />
<TLink Size=""Size.Large"">跳转链接</TLink>
<TLink Size=""Size.Large"" Theme=""Theme.Primary"">跳转链接</TLink>
<TLink Size=""Size.Large"" Theme=""Theme.Warning"">跳转链接</TLink>
<TLink Size=""Size.Large"" Theme=""Theme.Success"">跳转链接</TLink>
<TLink Size=""Size.Large"" Theme=""Theme.Danger"">跳转链接</TLink>
```
")
    </CodeContent>
    </Example><div id="API"></div>
<ComponentAPI Component="typeof(TLink)"></ComponentAPI>
</LayoutContent>